<template>
  <view class="content">
    <view class="mForm">
      <view class="mFormItem mFormItem1" @click="onEdit('logo')">
        <view class="mFormLet">头像</view>

        <view class="mFormRig">
          <image :src="userInfo.logo" mode="aspectFill" class="tx"></image>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>

    <view class="mForm">
      <view
        class="mFormItem"
        @click="
          $utils.toUrl(`/service-home/user/edit-name?name=${userInfo.name}`)
        "
      >
        <view class="mFormLet">姓名</view>

        <view class="mFormRig">
          <view class="inp">{{ userInfo.name }}</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
      <view
        class="mFormItem"
        @click="
          $utils.toUrl(`/service-home/user/edit-des?text=${userInfo.desc}`)
        "
      >
        <view class="mFormLet">简介</view>

        <view class="mFormRig">
          <view class="inp u-line-1">{{ userInfo.desc || "添加简介" }}</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>

    <view class="mForm">
      <view
        class="mFormItem"
        @click="$utils.toUrl('/service-home/user/edit-tel')"
      >
        <view class="mFormLet">手机号码</view>

        <view class="mFormRig">
          <view class="inp">{{ telFilter }}</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>
    <view class="mForm">
      <view
        class="mFormItem"
        @click="
          $utils.toUrl(
            `/service-home/user/edit-album?album=${JSON.stringify(pics)}`
          )
        "
      >
        <view class="mFormLet">相册</view>

        <view class="mFormRig">
          <view class="inp">上传照片</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>

    <!-- <div class="bt">保存</div> -->
  </view>
</template>

<script>
import { index as serviceIndex, updateInfo } from "@/api/service-home";
export default {
  data() {
    return {
      userInfo: {},
      pics: []
    };
  },

  computed: {
    // 服务时间处理
    serviceDate() {
      if (this.userInfo.book_start_time) {
        return `${this.userInfo.book_start_time}-${this.userInfo.book_end_time}`;
      }
      return "设置服务时间";
    },
    // 手机号处理
    telFilter() {
      if (this.userInfo.tel) {
        return `${this.userInfo.tel.slice(0, 4)}****${this.userInfo.tel.slice(
          -4
        )}`;
      }
      return "";
    }
  },

  onLoad() {
    this.$utils.hideShareMenu();
  },

  onShow() {
    this.loadData();
  },

  methods: {
    async loadData() {
      const res = await serviceIndex({}, true);
      this.userInfo = res.data.workerInfo;
      this.pics = res.data.pics;
    },
    onEdit(type) {
      if (type === "logo") {
        this.$utils.uploadImage(1, async (res) => {
          await updateInfo({ key: "logo", val: res });
          this.userInfo.logo = res;
        });

        return;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }

  &.mFormItem1 {
    padding: 12rpx 0;
  }
}

.mFormRig {
  margin-left: 40rpx;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mForm {
  margin-bottom: 12rpx;
  padding: 0 24rpx;
  background: #fff;

  .tx {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    background: #f2f2f2;
  }

  .icon-arrow-right {
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #888;
  }

  .inp {
    text-align: right;
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
    flex: 1;
    width: 0;
    color: #888;
  }
}

.mFormLet {
  font-size: 28rpx;
  color: #1d1d1d;
}

.bt {
  margin: 80rpx auto 0;
  width: 678rpx;
  height: 88rpx;
  background: #f0250e;
  border-radius: 120rpx 120rpx 120rpx 120rpx;

  font-size: 32rpx;
  font-weight: 600;
  line-height: 88rpx;
  text-align: center;
  color: #fff;
}
</style>
